<!--首页-->
<template>
  <div class="home-page">
    <!-- 系统模块 -->
    <a-card size="small" :bodyStyle="{ height: 'calc(100% - 38px)' }" class="system-card">
      <div slot="title">
        <icon-font type="icon-shezhi" class="title-icon" style="color: #52C41A;" />
        <span>系统模块</span>
      </div>
      <div slot="extra">
        <a-icon type="bars" title="更多" class="more" style="color: #52C41A;" />
      </div>
      <a-card-grid v-for="(item, index) in parameterList" :key="index">
        <div :style="{ color: item.color }">{{ item.num }}</div>
        <icon-font :type="item.icon" :style="{ color: item.color }" />
        <div class="card-title">{{ item.title }}</div>
      </a-card-grid>
    </a-card>
    <a-row :gutter="[10, 10]">
      <!-- 快捷方式模块 -->
      <a-col :span="12">
        <div style="height: 400px;">
          <a-card size="small" :bodyStyle="{ height: 'calc(100% - 38px)', padding: 0 }">
            <div slot="title">
              <icon-font type="icon-anquan" class="title-icon" style="color: #FA541C;" />
              <span>快捷方式</span>
            </div>
            <div slot="extra">
              <a-icon type="bars" title="更多" class="more" style="color: #FA541C;" />
            </div>
            <a-row :gutter="[10, 10]" class="gutter-row" style="margin: 0;padding: 5px;">
              <a-col :span="4" v-for="(item, index) in parameterList" :key="index">
                <div class="router-box">
                  <div class="router-icon">
                    <icon-font :type="item.icon" :style="{ color: item.color }" />
                  </div>
                  <span>{{ item.title }}</span>
                </div>
              </a-col>
            </a-row>
          </a-card>
        </div>
      </a-col>
      <!-- 新闻管理模块 -->
      <a-col :span="12">
        <div style="height: 400px;">
          <a-card size="small" :bodyStyle="{ height: 'calc(100% - 38px)', padding: '12px' }">
            <div slot="title">
              <icon-font type="icon-xinwen1" class="title-icon" style="color: #F5222D;" />
              <span>新闻管理</span>
            </div>
            <div slot="extra">
              <a-icon type="bars" title="更多" class="more" style="color: #F5222D;" />
            </div>
            <a-list item-layout="horizontal" :data-source="newsList">
              <a-list-item slot="renderItem" slot-scope="item">
                <a-list-item-meta
                  :description="item.description"
                >
                  <a slot="title" href="https://www.antdv.com/">{{ item.title }}</a>
                </a-list-item-meta>
              </a-list-item>
            </a-list>
          </a-card>
        </div>
      </a-col>
      <!-- 档案数量展示 -->
      <a-col :span="12">
        <div style="height: 400px;">
          <a-card size="small" :bodyStyle="{ height: 'calc(100% - 38px)', padding: '12px', }">
            <div slot="title">
              <icon-font type="icon-dangan7" class="title-icon" style="color: #FAAD14;" />
              <span>档案数量展示</span>
            </div>
            <div slot="extra">
              <a-icon type="bars" title="更多" class="more" style="color: #FAAD14;" />
            </div>
            <el-table
              :data="tableData"
              highlight-current-row
              height="100%"
              style="width: 100%">
              <el-table-column
                type="index">
              </el-table-column>
              <slot v-for="(item,index) in columns">
                <el-table-column
                  :key="index"
                  :property="item.field"
                  :label="item.title"
                  :width="item.width"
                  show-overflow-tooltip>
                </el-table-column>
              </slot>
            </el-table>
          </a-card>
        </div>
      </a-col>
      <!-- 数据字典 -->
      <a-col :span="12">
        <div style="height: 400px;">
          <a-card size="small" :bodyStyle="{ height: 'calc(100% - 38px)', padding: '12px 12px 12px 0' }">
            <div slot="title">
              <icon-font type="icon-shujuzidian" class="title-icon" style="color: #13C2C2;" />
              <span>数据字典</span>
            </div>
            <div slot="extra">
              <a-icon type="bars" title="更多" class="more" style="color: #13C2C2;" />
            </div>
            <a-timeline>
              <a-timeline-item>Create a services site 2015-09-01</a-timeline-item>
              <a-timeline-item>Solve initial network problems 2015-09-01</a-timeline-item>
              <a-timeline-item color="red">
                <a-icon slot="dot" type="clock-circle-o" style="font-size: 16px;" />
                Technical testing 2015-09-01
              </a-timeline-item>
              <a-timeline-item>Network problems being solved 2015-09-01</a-timeline-item>
            </a-timeline>
          </a-card>
        </div>
      </a-col>
    </a-row>
  </div>
</template>
<script>
export default {
  name: '',
  components: {
  },
  data () {
    return {
      parameterList: [
        {
          title: '首页',
          num: 1,
          icon: 'icon-shouye',
          color: '#4189ff'
        },
        {
          title: '系统设置',
          num: 2,
          icon: 'icon-shezhi',
          color: '#ff5c53'
        },
        {
          title: '安全管理',
          num: 3,
          icon: 'icon-anquan',
          color: '#a866fe'
        },
        {
          title: '档案接收',
          num: 4,
          icon: 'icon-danganjieshou',
          color: '#ffec13'
        },
        {
          title: '预归档平台',
          num: 5,
          icon: 'icon-shouji',
          color: '#ff964b'
        },
        {
          title: '档案接收',
          num: 6,
          icon: 'icon-shenpi',
          color: '#ff7de1'
        },
        {
          title: '档案整理',
          num: 7,
          icon: 'icon-zhuanxiangyanshou',
          color: '#6ce17c'
        },
        {
          title: '档案鉴定',
          num: 8,
          icon: 'icon-jiandingjigou',
          color: '#3bd8ae'
        },
        {
          title: '档案编研',
          num: 9,
          icon: 'icon-shishibianyan',
          color: '#54a7f6'
        }
      ],
      newsList: [
        {
          title: 'Ant Design Title 1',
          description: '菅义伟正式出任日本新首相'
        },
        {
          title: 'Ant Design Title 2',
          description: '老奶奶坐公交对着司机的头扫码'
        },
        {
          title: 'Ant Design Title 3',
          description: '比尔盖茨父亲去世'
        },
        {
          title: 'Ant Design Title 4',
          description: '台湾男星黄鸿升去世'
        },
        {
          title: 'Ant Design Title 5',
          description: '因抵制中国制造印度陷羽毛球荒'
        },
        {
          title: 'Ant Design Title 6',
          description: '山火中美国民众跳湖保命'
        }
      ],
      tableData: [{
        BI_BaseName: '声像档案以件整理',
        BI_FloderNumber: '100',
        BI_FileNumber: '20',
        BI_AppendixNumber: '10',
        BI_PageCount: '150',
        BI_FulltextNumber: '2'
      }, {
        BI_BaseName: '文书档案以件整理',
        BI_FloderNumber: '100',
        BI_FileNumber: '20',
        BI_AppendixNumber: '10',
        BI_PageCount: '150',
        BI_FulltextNumber: '2'
      }, {
        BI_BaseName: '科技档案以卷整理',
        BI_FloderNumber: '100',
        BI_FileNumber: '20',
        BI_AppendixNumber: '10',
        BI_PageCount: '150',
        BI_FulltextNumber: '2'
      }, {
        BI_BaseName: '诉讼档案',
        BI_FloderNumber: '100',
        BI_FileNumber: '20',
        BI_AppendixNumber: '10',
        BI_PageCount: '150',
        BI_FulltextNumber: '2'
      }, {
        BI_BaseName: '会计档案以卷整理',
        BI_FloderNumber: '100',
        BI_FileNumber: '20',
        BI_AppendixNumber: '10',
        BI_PageCount: '150',
        BI_FulltextNumber: '2'
      }],
      columns: [
        {
          title: '门类名称',
          field: 'BI_BaseName'
        },
        {
          title: '案卷数量',
          field: 'BI_FloderNumber'
        },
        {
          title: '文件数量',
          field: 'BI_FileNumber'
        },
        {
          title: '附件数量',
          field: 'BI_AppendixNumber'
        },
        {
          title: '页数',
          field: 'BI_PageCount'
        },
        {
          title: '全文数量',
          field: 'BI_FulltextNumber'
        }
      ]
    }
  },
  created () {
  },
  mounted () {},
  methods: {}
}
</script>
<style lang="less" scoped>
.home-page {
  width: 100%;
  min-height: 100%;
  background: #f5f7fa;
  padding: 10px;
  /deep/ .ant-card {
    .title-icon {
      font-size: 18px;margin-right: 10px;
    }
    .more {
      font-size: 18px;
      cursor: pointer;
    }
    .ant-list, .gutter-row, .ant-timeline {
      height: 100%;
      overflow: auto;
      // 滚动条样式
      &::-webkit-scrollbar {
        width: 6px;
        height: 6px;
        background-color: transparent;
      }
      &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        background-color: #ccc;
      }
      &::-webkit-scrollbar-track {
        background-color: transparent;
      }
    }
    .gutter-row {
      .router-box {
        height: 100px;
        border: 1px solid #e8e8e8;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.3s;
        &:hover {
          box-shadow: 0 0 10px #e8e8e8;
          span {
            color: #1890FF;
          }
        }
        .router-icon {
          margin-bottom: 6px;
          .anticon {
            font-size: 30px;
          }
        }
      }
    }
    .ant-timeline {
      padding-left: 12px;
    }
  }
  .system-card {
    margin-bottom: 10px;
    /deep/ .ant-card-body {
      padding: 10px 10px 0;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      .ant-card-grid {
        width: inherit;
        margin: 0 10px 10px 0;
        padding: 16px 8px;
        background: #EBEEF5;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        &:hover {
          color: #1890FF;
        }
        .anticon {
          font-size: 24px;
          margin: 0 10px;
          transition: .6s;
          &:hover {
            transform: rotate(360deg) scale(1.5);
          }
        }
      }
    }
  }
}
</style>
